import { Box, Flex } from '@chakra-ui/react';
import IAIIconButton from 'common/components/IAIIconButton';
import CurrentImageButtons from 'features/gallery/components/CurrentImage/CurrentImageButtons';
import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
import { forwardRef, useImperativeHandle, useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { BiExit } from 'react-icons/bi';
import { ReactZoomPanPinchRef, TransformWrapper } from 'react-zoom-pan-pinch';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { ImageDTO } from 'services/api/types';
import useImageTransform from '../hooks/useImageTransform';
import ReactPanZoomButtons from './ReactPanZoomButtons';
import ReactPanZoomImage from './ReactPanZoomImage';

type ImageTransformWrapperProps = {
  imageDTO?: ImageDTO;
};
export default forwardRef(function ImageTransformWrapper(
  { imageDTO }: ImageTransformWrapperProps,
  ref
) {
  const dispatch = useAppDispatch();
  const isLightBoxOpen = useAppSelector(
    (state) => state.lightbox.isLightboxOpen
  );

  const {
    rotation,
    scaleX,
    scaleY,
    flipHorizontally,
    flipVertically,
    rotateCounterClockwise,
    rotateClockwise,
    reset,
  } = useImageTransform();

  useHotkeys(
    'Esc',
    () => {
      if (isLightBoxOpen) {
        dispatch(setIsLightboxOpen(false));
      }
    },
    [isLightBoxOpen]
  );

  const transformComponentRef = useRef<ReactZoomPanPinchRef | null>(null);
  useImperativeHandle(
    ref,
    () => {
      if (!transformComponentRef) {
        return {};
      }
      return {
        ...transformComponentRef.current,
      };
    },
    []
  );
  return (
    <TransformWrapper
      centerOnInit
      minScale={0.2}
      initialScale={1}
      initialPositionX={50}
      initialPositionY={50}
      ref={transformComponentRef}
    >
      {(utils) => (
        <Box pos="relative" flexGrow={1} height="100%">
          <Flex
            sx={{
              flexDir: 'column',
              position: 'absolute',
              insetInlineStart: 2,
              gap: 4,
              zIndex: 3,
              top: 2,
            }}
          >
            <IAIIconButton
              icon={<BiExit />}
              aria-label="Exit Viewer"
              onClick={() => {
                dispatch(setIsLightboxOpen(false));
              }}
              fontSize={20}
            />
            <ReactPanZoomButtons
              {...utils}
              flipHorizontally={flipHorizontally}
              flipVertically={flipVertically}
              rotateCounterClockwise={rotateCounterClockwise}
              rotateClockwise={rotateClockwise}
              reset={reset}
            />
          </Flex>
          <Flex
            sx={{
              position: 'absolute',
              top: 4,
              zIndex: 3,
              insetInlineStart: '50%',
              transform: 'translate(-50%, 0)',
            }}
          >
            <CurrentImageButtons />
          </Flex>

          {imageDTO && (
            <>
              <ReactPanZoomImage
                rotation={rotation}
                scaleX={scaleX}
                scaleY={scaleY}
                image={imageDTO?.image_url}
              />

              <Box
                sx={{
                  position: 'absolute',
                  top: 0,
                  insetInlineStart: 0,
                  w: '100%',
                  h: '100%',
                  px: 12,
                  pointerEvents: 'none',
                }}
              >
                <NextPrevImageButtons />
              </Box>
            </>
          )}
        </Box>
      )}
    </TransformWrapper>
  );
});
